'use strict';

const path = require('path')
const MiniCssContractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'production', // 指定当前打包的环境

  // 也可以是多入口
  entry: {
    app: './src/index.js',
    search: './src/search.js'
  },


  output: {
    path: path.join(__dirname, 'dist'),
    // 当多文件出口要用 []
    filename: '[name]_[chunkhash:8].js' // 文件指纹
  },

  module: { // 处理webpack不能解析的文件
    rules: [
      {
        test: /.js$/,
        // 进行es6 解析，需要配合.babelrc文件使用
        use: 'babel-loader'
      },
      {
        test: /.css$/,
        use: [
          MiniCssContractPlugin.loader,
          'css-loader',  // 把css转换成commonjs对象
        ]
      },
      {
        test: /.less$/,
        use: [
          MiniCssContractPlugin.loader,
          'css-loader',
          'less-loader' // 把less转换成css , less-loader 依赖 less
        ]
      },
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'file-loader', // 可以使用file-loader / url-loader 使用url-loader会用base64进行转码
            options: {
              name: 'img/[name]_[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  },

  // watch: true,
  // watchOptions: {
  //   ignored: /node_modules/,
  //   aggregateTimeout: 300, // 监听变化等待300ms再去执行
  //   poll: 1000 // 不断轮询判断文件是否有变化，每秒1000次
  // },

  
 //  生产环境不需要热更新


  
  plugins: [
    new MiniCssContractPlugin({//生产环境下提取css，这个时候不需要使用style-loader  
      filename: 'css/[name]_[contenthash:8].css'
    }),
    new OptimizeCssAssetsWebpackPlugin({ // 压缩css
      assetNameRegExp: /\.css$/g,
      cssProcessor: require('cssnano')
    }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname ,'src/index.html'),
      filename: 'index.html',
      chunks: ['index'],
      inject: true,
            minify: {
                html5: true,
                collapseWhitespace: true,
                preserveLineBreaks: false,
                minifyCSS: true,
                minifyJS: true,
                removeComments: false
            }
    }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname ,'src/search.html'),
      filename: 'search.html',
      chunks: ['search'],
      inject: true,
            minify: {
                html5: true,
                collapseWhitespace: true,
                preserveLineBreaks: false,
                minifyCSS: true,
                minifyJS: true,
                removeComments: false
            }
    })
  ]
}